<template>
 <div style="display: flex;">
    <!-- 角色树 -->
    <div style="width: 300px; height: 500px;border: 1px solid #ccc;margin-left: 50px;" >
         <el-form-item  :label-width="100" >
              <el-tree
                style="max-width: 600px"
                class="filter-tree"
                :data="data"
                :props="defaultProps"
                default-expand-all
                highlight-current="false"
                :filter-node-method="filterNode"
                @node-click="handleNodeClick"
              />
        </el-form-item :label-width="100">
    </div>
    <!-- 菜单树 -->
    <div style="width: 400px; height: 500px;border: 1px solid #ccc;margin-left: 30px;" >
        <el-form-item   :label-width="100">
              <el-tree
                ref="treeRef"
                style="max-width: 600px"
                class="filter-tree"
                :data="MenuData"
                :props="MenudefaultProps"
                default-expand-all
                show-checkbox
                node-key="id"
                :filter-node-method="filterNode"
                @check-change="handleCheckChange"
              />
        </el-form-item :label-width="100">
        <el-form-item  :label-width="100">
            <el-button type="primary" @click="SaveRoleMenu">保存</el-button>
            <el-button type="primary" >取消</el-button>
        </el-form-item>
    </div>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import moment  from 'moment'
import {ref,reactive, onMounted,nextTick,watch}from 'vue'
import { ElMessage, type FormInstance, type FormRules ,ElMessageBox} from 'element-plus'
import type { FilterNodeMethodFunction, TreeInstance } from 'element-plus'
import { ListFormat } from 'typescript'
import { Read,Write } from '@/http/interceptors'
//#region  角色树
interface Tree {
  [key: string]: any
}

const filterText = ref('')

const defaultProps = {
  label: 'roleName',
  Id:'id'
}
const filterNode: FilterNodeMethodFunction = (value: string, data: Tree) => {
  if (!value) return true
  return data.label.includes(value)
}

const handleNodeClick=(data:any)=>{
   console.log('选择的角色',data.id)
   Menufrom.rId=data.id
   GetRoleMenu(data.id)//根据角色查询分配的菜单权限
}

const data=ref([])

onMounted(()=>{
    GetRole();
     MenuTree();
     
})

const GetRole = ()=>{
    Read.get("/api/UserGetRoleList").then(res=>{
        data.value=res.data.data
    })
}

//#endregion

//#region  菜单树

const treeRef = ref<TreeInstance>()

const MenudefaultProps = {
  children: 'children',
  label: 'menuName',
}

const handleCheckChange=(MenuData:any)=>{
    console.log('点击的节点',MenuData.id)
}
//
const MenuData=ref([])
const MenuTree=()=>{
    Read.get("/api/MenuGetMenuTree").then(res=>{
        MenuData.value=res.data.data
    })
}
//#endregion


//#region   保存方法

const Menufrom=reactive({
    "mId": "string",
    "rId": 0
})
//保存角色和菜单权限方法
const SaveRoleMenu=()=>{
      const checkedKeys = treeRef.value?.getCheckedKeys(false) || [];
      Menufrom.mId = checkedKeys.join(',');
      console.log('菜单数组',Menufrom.mId)
    Write.post("/api/MenuAddRoleMenu",Menufrom).then(res=>{
        if(res.data.code==200)
        {
            ElMessage.success(res.data.message)
        }
        else{
            ElMessage.error(res.data.message)
        }
    })
}
//#endregion 

//#region  反填

const GetRoleMenu=(rid:any)=>{
    Read.get("/api/MenuGetRolePermission",{params:{RId:rid}}).then(res=>{
        if(res.data.code==200)
        {
            const  mids =res.data.data.map((item:any)=>item.mId);//map查询所有菜单
           treeRef.value?.setCheckedKeys(mids,false) //将菜单为勾选状态
        }
        else
        {
             treeRef.value?.setCheckedKeys([],false) 
        }
   
    });
}
//#endregion

</script>

<style scoped>

</style>